<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cart</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        li,
        ol {
            list-style: none;
        }
        
        .container {
            width: 80%;
            margin: 50px auto;
        }
        
        .m-table,
        th,
        td {
            border: 1px solid #43240c;
            border-collapse: collapse;
            text-align: center;
        }
        
        .m-table caption {
            font-size: 30px;
            font-weight: bold;
            /* color: #284d9e; */
            color: rgb(163, 87, 87);
            margin-bottom: 10px;
        }
        
        .m-table tr {
            line-height: 40px;
        }
        
        .m-table tr:hover {
            background-color: #eeeaea;
        }
        
        .m-table th {
            width: 200px;
            background-color: #fad609;
            color: white;
            text-align: center;
        }
        
        .m-table tr td input[name="price"] {
            text-align: center;
            border: none;
            background: transparent;
            width: 45px;
        }
        
        .m-table tr td input[name="amount"] {
            width: 45px;
            text-align: center;
            border: 1px solid #999999;
            border-left: none;
            border-right: none;
            height: 21px;
        }
        
        .content ol {
            float: right;
            clear: both;
            margin-top: 60px;
        }
        
        .container ol li {
            float: left;
        }
        
        .container ol li:nth-of-type(1) {
            color: #64aff4;
            width: 120px;
            margin-top: 15px;
            margin-right: -45px;
        }
        
        .container ol {
            float: right;
        }
        
        .container ol li span {
            float: right;
            width: 80px;
            height: 35px;
            line-height: 35px;
            font-size: 14px;
            font-family: "微软雅黑";
            background: #e23434;
            color: #ffffff;
            text-align: center;
            margin-top: 5px;
            margin-right: 15px;
            cursor: pointer;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container">
        <table class="m-table">
            <caption>购物车</caption>
            <tbody>
                <tr>
                    <th><input type="checkbox" class="checkbox-all" onclick="checkboxAll()">全选</th>
                    <th>品类</th>
                    <th>图片</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>金额</th>
                </tr>
                <tr>
                    <td><input type="checkbox" class="checkbox-item" onclick="checkBoxSingle()">1</td>
                    <td>显瘦连衣裙</td>
                    <td><img src="../images/c2.png" style="width: 100px;height: 100px;margin-top: 10px;"></td>
                    <td>¥<input type="text" name="price" value="40.08"></td>
                    <td><input type="button" name="minus" value="-" onclick="minus(0)">
                        <input type="text" name="amount" value="1">
                        <input type="button" name="plus" value="+" onclick="plus(0)">
                    </td>
                    <td id="price0">¥40.08</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="checkbox-item" onclick="checkBoxSingle()">2</td>
                    <td>T恤</td>
                    <td><img src="../images/g03.png" style="width: 100px;height: 100px;margin-top: 10px;"></td>
                    <td>¥<input type="text" name="price" value="35.08"></td>
                    <td><input type="button" name="minus" value="-" onclick="minus(1)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(1)">
                    </td>
                    <td id="price1">¥35.08</td>
                </tr>
            </tbody>
        </table>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span onclick="accounts()">结 算</span></li>
        </ol>
    </div>
    <!-- <script src="../js/login.js"></script> -->
    <script src="../js/total.js"></script>
</body>

</html>